<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page session="false"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<!-- This template was created by Mantis-a [http://www.mantisa.cz/]. For more templates visit Free website templates [http://www.mantisatemplates.com/]. -->

<meta name="Description" content="..." />
<meta name="Keywords" content="..." />
<meta name="robots" content="all,follow" />
<meta name="author" content="..." />
<meta name="copyright" content="Mantis-a [http://www.mantisa.cz/]" />

<meta http-equiv="Content-Script-Type" content="text/javascript" />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<!-- CSS -->
<link rel="stylesheet" href="/ClienteWeb/resources/css/style.css"
	type="text/css" media="screen, projection, tv" />
<link rel="stylesheet" href="/ClienteWeb/resources/css/structure.css"
	type="text/css" />
<link rel="stylesheet" href="/ClienteWeb/resources/css/form.css"
	type="text/css" />
<!--[if lte IE 6]><link rel="stylesheet" type="text/css" href="/ClienteWeb/resources/css/style-ie.css" media="screen, projection, tv" /><![endif]-->
<link rel="stylesheet" href="/ClienteWeb/resources/css/style-print.css"
	type="text/css" media="print" />
<link rel="shortcut icon" href="/ClienteWeb/resources/favicon.ico"
	type="image/x-icon" />

<!-- JavaScript -->
<script src="/ClienteWeb/resources/scripts/wufoo.js"></script>

<!--[if lt IE 10]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->


<title>Aplicación Cliente | Homepage</title>
<script
	src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAA46dmZ_LKQ9WkwR8MIPdBahSj7k5dki0B2TgSCxPjMq1BqYTXWhR5H0QuzLCWGzJJrk5CAsHmcG80bA"
	type="text/javascript"></script>
<script type="text/javascript">
	var map;
 	var point;
	function cargarMapa() {
		if (GBrowserIsCompatible()) {
			map = new GMap2(document.getElementById("mapa"));
			map.setCenter(new GLatLng(-12.038481128073661, -76.87846183776855),
					13);
			map.setUIToDefault();
		}
	}

	function pintarMapa(data) {
		alert(data.codigo);
		
		alert(data.puertos.length);
		for (var i=0; i<=data.puertos.length; i++)
		{
			alert(data.puertos[i].longitud);
			alert(data.puertos[i].latitud);
			//var point = new GLatLng(data.puertos[i].latitud ,data.puertos[i].longitud);
			

			point = new GLatLng(data.puertos[i].latitud ,data.puertos[i].longitud);
			map.addOverlay(new GMarker(point)); 
			map.openInfoWindowHtml(point, data.puertos[i].nombre );
		}
		alert('salio');
	}
</script>

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
	$(document)
			.ready(
					function() {
						$("button")
								.click(
										function() {
											$
													.ajax({

														url : 'http://localhost:8081/agenciaNavieraws/rest/desembarqueService/consultarDesembarque/'
																+ $(
																		"#codigoEmbarque")
																		.val(),
														type : 'GET',
														data : "{}",
														contentType : "application/json",
														dataType : "json",

														success : function(data) {
															alert('entro');
															pintarMapa(data);
															//alert("Data" + data);

														},

														error : function(data) {
															alert('Error');

															//alert("Error"
															//	+ data);
														}
													});
										});
					});
</script>

</head>

<body onload="cargarMapa()" onunload="GUnload()">
	<div id="main">

		<!-- Header -->
		<div id="header">
			<div id="header-in">
				<ul id="navigation">
					<li id="house"><a href="#">Homepage</a>|</li>
					<li id="sitemap"><a href="#">Sitemap</a>|</li>
					<li id="envelope"><a href="#">Contact us</a></li>
				</ul>
				<!-- Your website name  -->
				<h1>
					<a href="#">Aplicación Cliente</a>
				</h1>
				<!-- Your website name end -->

				<!-- Your slogan -->
				<h2>&hellip;</h2>
				<!-- Your slogan end -->

				<!-- Search form -->
				<form class="searching" action="">
					<fieldset>
						<label>Searching</label> <input class="search" type="text"
							onfocus="if(this.value==this.defaultValue)this.value=''"
							onblur="if(this.value=='')this.value=this.defaultValue"
							value="Search term&hellip;" /> <input class="hledat"
							type="image" src="/ClienteWeb/resources/img/search-button.gif"
							name="" alt="Search" />
					</fieldset>
				</form>
				<!-- Search end -->
			</div>
		</div>
		<!-- Header end -->

		<!-- Menu -->
		<div id="menu-box" class="cleaning-box">
			<a href="#skip-menu" class="hidden">Skip menu</a>
			<ul id="menu">
				<li><a href="home">Home</a>
				</li>
				<li class="first"><a href="consultaEmbarque" class="active">Consulta
						de Embarque</a>
				</li>
				<li><a href="facturacion">Facturación de Embarque</a>
				</li>
				<li><a href="#"></a>
				</li>
				<li><a href="#"></a>
				</li>
				<li><a href="#"></a>
				</li>
			</ul>
		</div>
		<!-- Menu end -->

		<hr class="noscreen" />

		<div id="skip-menu"></div>

		<div id="content">

			<!-- Content box with white background and gray border -->
			<div id="content-box">

				<!-- Left column -->
				<div id="content-box-in-left">
					<div id="content-box-in-left-in">
						<h3>Consulta de Embarques</h3>
						<p></p>
						<div class="cleaner">&nbsp;</div>



						<div id="container">

							<form id="consultarembarque" name="consultarembarque"
								class="wufoo topLabel page" autocomplete="off"
								enctype="multipart/form-data" method="post" novalidate action="">

								<ul>

									<li id="foli0" class="     "><label class="desc"
										id="title0" for="Field0"> Código de codigoEmbarque </label> <span>
											<input id="codigoEmbarque" name="codigoEmbarque" type="text"
											class="field text fn" value="" size="25" tabindex="1" /> </span>
									</li>
									<li class="buttons ">
										<div>

											<button>Guardar</button>
										</div>
									</li>
								</ul>
							</form>

						</div>
						<!--container-->

						<p></p>
						<h3>Resultado</h3>
						<p></p>
						<table>
							<tr align="center">
								<td align="center">
									<div id="mapa" style="width: 700px; height: 400px"></div></td>
							</tr>

						</table>

					</div>
				</div>
				<!-- Left column end -->

				<hr class="noscreen" />


			</div>
			<!-- Content box with white background and gray border end -->
		</div>


		<hr class="noscreen" />

		<!-- Footer end -->
		<div id="footer">
			<div id="footer-in">
				<p class="footer-left">
					&copy; <a href="#">Your website name</a>, 2008.
				</p>
				<p class="footer-right">
					<a href="http://www.mantisatemplates.com/">Free web templates</a>
					by <a href="http://www.mantisa.cz/">Mantis-a</a>
				</p>
			</div>
		</div>
	</div>
</body>
</html>